<template>
  <div class="edit-photo">
    <img 
      class="img"
      :src="imageBlob" 
      ref="img" 
    />
    <van-nav-bar
      class="toolbar"
      left-text="取消"
      right-text="完成"
      @click-left="$emit('close')"
      @click-right="onConfirm"
    />
  </div>
</template>

<script>
import {updateUserPhoto} from '@/api/user'
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

export default {
  name: "EditPhoto",
  components: {},
  props: {
    file: {
      type: File,
      required: true 
    },
    // Blob类型
    // imageBlob: {
    //   type: String,
    //   required: true
    // }
  },
  data() {
    return {
      imageBlob: window.URL.createObjectURL(this.file),
      cropper: null 
    };
  },
  computed: {},
  watch: {},
  methods: {
    getCroppedCanvas() {
      return new Promise(resolve => {
        this.cropper.getCroppedCanvas().toBlob(file => {
          resolve(file)
        })
      })
    },
    // 如果要求 Content-Type 是 multipart/form-data，则一定要提交FormData数据对象，专门用于文件上传的，不能提交{},没有用。
    async onConfirm() {
      this.$toast.loading({
        message: "保存中",
        forbidClick: true,
        duration: 0  //展示事件，0 表示持续展示
      })

      try {
      // 基于服务端的裁切使用 getData 方法获取裁切参数
      // console.log(this.cropper.getData())

      // 纯客户端的裁切使用 getCroppedCanvas 获取裁切的文件对象

        const file = await this.getCroppedCanvas() 
        const fd = new FormData()
        fd.append('photo',file)

        // const fd = new FormData()
        // // fd.append('photo', 文件对象)
        // fd.append('photo',this.file)

        const {data} = await updateUserPhoto(fd)
        console.log('上传照片',data);

        this.$toast.success("保存成功");

        // 更新父组件中的用户头像
        // this.$emit('update-photo',this.imageBlob)
        this.$emit('update-photo',window.URL.createObjectURL(file))
        this.$emit('close')
        this.$toast.success('保存成功')

      } catch (error) {
        this.$toast.fail('更新失败')
      }
    },

  },
  created() {
  },
  mounted() {
    // 获取需要裁切的图片 DOM 
    // 因为要操作DOM，所以要放在mounted
    // const image = document.getElementById('image');
    // vue中获取DOM，要通过ref
    const image = this.$refs.img;
    this.cropper = new Cropper(image, {
      // 定义cropper的视图模式
      viewMode: 1,
      // 定义cropper的拖拽模式。
      dragMode: 'move',
      // 裁剪框的宽高比
      aspectRatio: 1,
      // 可设置裁剪框的范围，为1则是与整个裁剪区域一样大
      // autoCropArea: 0.9,
      // cropBoxMovable—是否通过拖拽来移动剪裁框。
      cropBoxMovable: false,
      // cropBoxResizable—是否通过拖动来调整剪裁框的大小
      cropBoxResizable: false,
      background: false,
      // movable–是否允许可以移动后面的图片
      movable: true,
      // initialAspectRatio: 1,
      // 添加额外的元素(容器)以供预览
      // preview: '.before',
      // zoomOnWheel–是否可以通过移动鼠标来放大图像。
      // zoomOnWheel: false,
    })
  },
};
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
.edit-photo {
  // 如果不设置 裁切图片不居中
  height: 100%;
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
  }
  .img {
    display: block;
    max-width: 100%;
  }
}
</style>